<template>
<el-form ref="form" :model="form" label-width="150px"  v-loading="form_loading" :rules="rules" style="width:50%">
  <el-button type="primary" class="goback_btn" @click="goback"> 返回 </el-button>
  
  <el-form-item label="图片" v-if="show">
   <el-upload
  class="avatar-uploader"
  action="/sys/img/upload"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload"
  name = "imgFile"
  :on-error="handleerror"
   v-loading="img_loading"
   :disabled="!show"
  >
    
  <!-- :auto-upload="false" -->
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>

<el-form-item label="图片" prop="name"  v-if="!show"> 
<PictureView v-if="form.avatar" :pictureList="form.avatar"></PictureView>
</el-form-item>

<el-form-item label="名称" prop="name"  > 
    <el-input v-model="form.name"  :disabled="!show"></el-input>
</el-form-item>

<el-form-item label="购买链接" prop="buyUrl"   >
    <el-input v-model="form.buyUrl" :disabled="!show"></el-input>
</el-form-item>

<el-form-item label="购买渠道" prop="buyType">
    <el-select v-model="form.buyType" placeholder="请选状态"  :disabled="!show">
        <el-option label="未上市" value="0"></el-option>
           <el-option label="官方" value="1"></el-option>
          <el-option label="淘宝" value="2"></el-option>
           <el-option label="京东" value="3"></el-option>
            <el-option label="亚马逊" value="4"></el-option>
     </el-select>
</el-form-item>

<el-form-item label="硬件编号" prop="deviceId">
    <el-input v-model="form.deviceId" :disabled="!show"></el-input>
</el-form-item>

<el-form-item label="是否可以跳转" prop="isClick">
    <el-select v-model="form.isClick" placeholder="请选状态" :disabled="!show">
        <el-option label="可跳转" value="0"></el-option>
        <el-option label="不可跳转" value="1"></el-option>
     </el-select>
</el-form-item>

<el-form-item label="产品背景故事介绍url" prop="url" v-show = "show_url">
    <el-input v-model="form.url" :disabled="!show"></el-input>
</el-form-item>


<el-form-item label="状态" prop="status">
  <el-select v-model="form.status" placeholder="请选状态" :disabled="!show">
        <el-option label="取消" value="1"></el-option>
        <el-option label="正常" value="0"></el-option>
     </el-select>
</el-form-item>



 <!-- <div class="buttons">
   <el-button @click="getCheckedNodes">通过 node 获取</el-button>
   <el-button @click="getCheckedKeys">通过 key 获取</el-button>
   <el-button @click="setCheckedNodes">通过 node 设置</el-button>
   <el-button @click="setCheckedKeys">通过 key 设置</el-button>
   <el-button @click="resetChecked">清空</el-button>
 </div> -->
 <el-button type="success" class="goback_btn" @click="upload" v-if="show">提交</el-button>
   <!-- <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button> -->
</el-form>
</template>
<script>
import { CreateProp, getDetailProp, editProp } from '@/api/prop'
import PictureView from 'vue-simple-picture-preview'
// import back from '@/directive/goback/goback.js'
export default {
  data() {
    return {
      fileList: [{ imgFile: {}}],
      show: true,
      need_check_node: [],
      form_loading: false,
      show_msg: undefined,
      tree_loading: false,
      form: {
        buyType: '',
        buyUrl: '',
        deviceId: 1,
        isClick: [],
        avatar: '',
        name: '',
        status: '',
        url: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入数据', trigger: 'blur' }
        ],
        buyUrl: [
          { required: true, message: '请输入数据', trigger: 'blur' },
          { type: 'url', message: '请输入正确的url' }
        ],
        buyType: [
          { required: true, message: '请输入数据', trigger: 'change' }
        ],
        deviceId: [
          { required: true, message: '请输入数据', trigger: 'blur' }
        ],
        isClick: [
          { required: true, message: '请输入数据', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请输入数据', trigger: 'change' }
        ],
        url: [
          { required: true, message: '请输入数据', trigger: 'blur' },
          { type: 'url', message: '请输入正确的url' }
        ]
      },
      add_flag: false,
      data2: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      imageUrl: '',
      show_url: false,
      img_loading: false
    }
  },
  watch: {
    'form.isClick': function(val) {
      console.log('val')
      console.log(val)
      if (val == 0) {
        this.show_url = true
      } else {
        this.show_url = false
      }
    }
  },
  components: {
    PictureView: PictureView
  },
  methods: {
    handleerror() {
      this.img_loading = false
      this.$message.error('图片上传失败，请再次选择上传')
    },
    handle_upload() {
      console.log('handle_upload')
    },
    progress() {

    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.form.avatar = res.url
      this.img_loading = false
    },
    beforeAvatarUpload(file) {
      console.log(file.type)
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      this.img_loading = true
      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG 格式 或 png 格式')
        this.img_loading = false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        this.img_loading = false
      }
      // isJPG && isLt2M && isPNG
      return (isJPG || isPNG) && isLt2M
    },
    handle_show_msg() {

    },
    handleCheckChange(e) {
      // this.$refs.tree.setCheckedKeys([200, 203, 400])
    },
    getCheckedNodes() {

    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys())
    },
    setCheckedNodes() {
      this.$refs.tree.setCheckedNodes([{
        id: 5,
        label: '二级 2-1'
      }, {
        id: 9,
        label: '三级 1-1-1'
      }])
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([3])
    },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([])
    },
    goback() {
      this.$router.go(-1)
    },
    upload() {
      const upload_list = []
      this.$refs.form.validate((valid) => {
        //   成功

        !this.show ? this.show = false : ''
        console.log('show++++++++++++++++++++++++++++')
        console.log(this.show)
        console.log('this.form')
        console.log(this.form)
        if (valid) {
          if (!this.add_flag) {
            console.log(this.show)
            this.form.facilityId = JSON.parse(this.$route.query.usermsg).facilityId
            editProp(this.form).then((e) => {
              this.table_loading = false
              this.log(e)
              if (e.data.code === 200) {
                this.$notify({
                  title: '成功',
                  message: '更新成功',
                  type: 'success',
                  duration: 2000,
                  onClose: () => {
                    this.goback()
                  }
                })
              } else {
                this.$message.error(e.data.msg)
              }
            }).catch((e) => {
              this.$message.error(e)
              this.table_loading = false
            })
          } else {
            CreateProp(this.form).then((e) => {
              this.table_loading = false
              this.log(e)
              if (e.data.code === 200) {
                this.$notify({
                  title: '成功',
                  message: '更新成功',
                  type: 'success',
                  duration: 2000,
                  onClose: () => {
                    this.goback()
                  }
                })
              } else {
                this.$message.error(e.data.msg)
              }
            }).catch((e) => {
              this.$message.error(e)
              this.table_loading = false
            })
          }

        //   失败
        } else {
          return false
        }
      })
    }

  },
  created() {
    this.table_loading = true
    let form

    const add_flag = this.$route.query.add_flag
    console.log('creaedd+_+_+_+_+_+_+_+_+_+_+_+_+_+_+_')
    console.log(add_flag)
    this.add_flag = add_flag
    this.show = this.$route.query.show
    if (this.$route.query.usermsg) { // 有数据的 detail
      form = JSON.parse(this.$route.query.usermsg)
    } else {
      form = ''
      this.form = {
        buyType: '',
        buyUrl: '',
        deviceId: 1,
        isClick: [],
        avatar: '',
        name: '',
        status: '',
        url: ''
      }
      return
    }

    // 没有传值 就是edit

    // this.$route.query.show ? form.disabled = true : form.disabled = false

    getDetailProp(form.facilityId).then((e) => {
      this.table_loading = false
      e.data.facility.avatar = [e.data.facility.avatar]
      this.form = e.data.facility
      console.log(e)
      this.form.facilityId = this.$route.query.usermsg.facilityId
      // console.log(e.facility)
      console.log(e.data.facility.avatar[0])
      this.imageUrl = e.data.facility.avatar
    }).catch((e) => {
      this.table_loading = false
      console.log(e)
    })
  },
  mounted() {

  }
}
</script>